<template>
  <div>
    <div class="box_bg">
      <ScaleBox class="bg" :width="1024" :height="768" bgc="#00060f" :delay="100" :isFlat="false">
        <div class="main-container chemicalProcess">
          <img @click="goBack" class="back" src="../../../assets/back.png" alt="" />
          <!-- <div @click="goToRecord" class="export">导出</div> -->
          <div @click="dialogVisible = true" class="search">查询</div>
          <div class="center_">
            <!-- <img class="nav_title" src="../../../assets/title.png" alt="" /> -->
            <div class="nav_title">系统日志</div>
          </div>
          <div class="center_">
            <div class="boxs">
              <div class="list_head">
                <div>时间</div>
                <div>用户</div>
                <div>操作内容</div>
              </div>
              <div class="list_boxs">
                <div class="list_content" v-for="item in ghList" :key="item.id">
                  <div>{{ item.updateTime }}</div>
                  <div>admin</div>
                  <div>{{ item.content }}</div>
                </div>
              </div>
            </div>
          </div>
          <div v-if="dialogVisible" class="answer_box">
            <div @click="dialogVisible = false" class="del">
              <img style="width: 40px" src="../../../assets/del.png" alt="" />
            </div>
            <div class="videoBox">
              <div class="aic">
                调控日期:
                <div class="content_box">
                  <el-date-picker popper-class="DateStyle" format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="searchFroem.startDate" type="date" placeholder="选择日期"> </el-date-picker>
                </div>
                ~
                <div class="content_box">
                  <el-date-picker popper-class="DateStyle" format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="searchFroem.endDate" type="date" placeholder="选择日期"> </el-date-picker>
                </div>
                <!-- <div @click="getAdd" class="add_icon">+</div> -->
              </div>
              <div class="center_">
                <div @click="saveGhTask_tk(0)" class="button green">重置</div>
                <div @click="saveGhTask_tk" class="button">确认</div>
              </div>
            </div>
          </div>
        </div>
      </ScaleBox>
    </div>
  </div>
</template>
<script>
// import store from '@/store'
import { getSysLogList } from '@/api/system'

import ScaleBox from 'vue2-scale-box'
import moment from 'moment'
export default {
  components: {
    ScaleBox
  },
  data() {
    return {
      searchFroem: {
        startDate: '',
        endDate: ''
      },
      dialogVisible: false,
      indexc: 0,

      ghList: []
    }
  },
  mounted() {
    this.getSysLogList()
  },
  beforeDestroy() {},
  methods: {
    saveGhTask_tk(val) {
      if (val == 0) {
        this.searchFroem = {
          startDate: '',
          endDate: ''
        }
      }
      this.dialogVisible = false
      this.getSysLogList()
    },
    goToRecord() {
      this.$router.push({
        path: '/home/recordList'
      })
    },
    getSysLogList() {
      let form = {
        pageNum: 1,
        pageSize: 500,
        startDate: this.searchFroem.startDate,
        endDate: this.searchFroem.endDate,
        type: 0
      }
      getSysLogList(form).then(res => {
        this.ghList = res.data
      })
    },
    goBack() {
      this.$router.go(-1)
    },
    getIndx(val) {
      this.$router.push({
        path: val
      })
    }
  }
}
</script>
<style>
.DateStyle {
  scale: 1.5;
  /* width: 670px;
  height: 580px; */
}
.timerPicer {
  scale: 2;
}
/* .DateStyle .el-picker-panel__content {
  width: 95%;
  height: 500px;
}
.DateStyle .el-date-table {
  height: 100%;
}
.DateStyle .el-date-table td {
  height: 60px;
  font-size: 20px;
}
.DateStyle .el-date-table tr {
  height: 60px;
  font-size: 23px;
}
.timerPicer .el-popper {
  width: 700px;
  height: 400px;
}
.el-time-spinner {
  height: 350px;
}
.el-time-spinner__wrapper {
  max-height: 350px;
}
.el-time-spinner__item {
  height: 40px;
  font-size: 20px;
}
.el-time-panel__content::before {
  top: 27%;
}
.el-time-panel__content::after {
  top: 27%;
} */
</style>
<style lang="less" scoped>
.export {
  width: 100px;
  height: 38px;
  background: #00b951;
  border-radius: 21px;
  cursor: pointer;
  position: absolute;
  right: 150px;
  top: 30px;
  font-size: 18px;
  line-height: 34px;

  text-align: center;
  color: #ffffff;
}
.search {
  width: 100px;
  height: 38px;
  background: #007eff;
  border-radius: 21px;
  cursor: pointer;
  position: absolute;
  right: 30px;
  top: 30px;
  font-size: 18px;
  line-height: 34px;
  text-align: center;
  color: #ffffff;
}
.device {
  position: absolute;
  top: 133px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow-y: scroll;
  height: 560px;
  .deviceBox {
    margin: 10px;
    width: 466px;
    height: 265px;
    background: #19253a;
    border-radius: 27px;
    position: relative;
    .status_box {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      position: absolute;
      width: 370px;
      left: 60px;
      bottom: 52px;
      .status_img {
        width: 92px;
        height: 92px;
        cursor: pointer;
      }
    }
    .deviceName {
      position: absolute;
      top: 26px;
      left: 29px;
      font-weight: 600;

      font-size: 24px;
      color: #f9fafa;
    }
    .deviceStatus {
      position: absolute;
      top: 34px;
      right: 29px;
      font-weight: 600;
      font-size: 24px;
      color: #f53325;
    }
  }
}

.back {
  width: 60px;
  height: 60px;
  cursor: pointer;
  position: absolute;
  top: 30px;
  left: 41px;
}
// /deep/.DateStyle {
//   width: 700px;
// }
// /deep/ .el-date-picker {
//   width: 700px;
// }

/* 自定义整个滚动条 */
::-webkit-scrollbar {
  width: 0px; /* 设置滚动条的宽度 */
}

/* 自定义滚动条轨道 */
::-webkit-scrollbar-track {
  background: transparent; /* 设置轨道的背景颜色 */
}

/* 自定义滚动条的滑块（thumb） */
::-webkit-scrollbar-thumb {
  background: #cceaf8; /* 设置滑块的背景颜色 */
  height: 12px;
}

/* 当滑块悬停或活动时，可以添加更多样式 */
::-webkit-scrollbar-thumb:hover {
  background: #555; /* 设置滑块在悬停状态下的背景颜色 */
}
/deep/.el-input-group__append {
  background-color: #387dff;
  color: #ffffff;
  cursor: pointer;
}

/deep/ .el-input__inner {
  font-weight: bold;
  color: #fff;
  text-align: center;
  font-style: normal;
  border: none;
  border-radius: 9px;
  background: transparent;
  border-radius: 20px 0 0 20px;
  font-size: 18px;
}
/deep/.el-range-input {
  background: transparent;
}
/deep/.el-range-separator {
  color: #ffffff;
}

.boxs {
  position: absolute;
  top: 115px;
  width: 957px;
  height: 611px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(11.02941176470588px);
  font-weight: 500;
  font-size: 24px;
  color: #ffffff;
  padding: 40px;
  .list_head {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    text-align: center;
    padding-bottom: 15px;
    border-bottom: 2px solid #ffffff;
  }
  .list_boxs {
    height: 500px;
    overflow-y: scroll;
  }
  .list_content {
    display: grid;

    grid-template-columns: 1fr 1fr 1fr;
    min-height: 50px;
    line-height: 45px;
    text-align: center;
    font-size: 18px;
    color: #f9fafa;
    border-bottom: 1px solid #979797;
  }
}
.aic {
  display: flex;
  align-items: center;
  min-height: 80px;
}
.bottom {
  position: absolute;
  bottom: 20px;
  display: flex;
  justify-content: space-around;
  width: 957px;
}
.bg {
  background: url('../../../assets/bg_.png') no-repeat center center;
  // width: 100vw;
  height: 100vh;
  width: 100vw;
  // background-color: #05032e;
  /*把背景图片放大到适合元素容器的尺寸，图片比例不变*/
  background-size: cover;
}
.box_bg {
  background-color: #011e7b !important;

  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
}
.center_ {
  display: flex;
  justify-content: center;
  .nav_title {
    font-family: 'MyCustomFont', sans-serif;
    display: flex;
    justify-content: center;
    // background: url('../assets/title.png') no-repeat center center;
    position: absolute;
    top: 20px;
    font-size: 42px;
    color: #ffffff;
    line-height: 58px;
    text-align: justify;
    font-style: normal;
    background: linear-gradient(90deg, #ffffff 0%, #0771ff 97%, #006dff 100%);
    -webkit-background-clip: text;
    color: transparent;

    .nav_t {
      font-weight: bolder;
      font-size: 34px;
      color: #3de6ff;
      line-height: 48px;
      text-align: center;
      font-style: normal;
      background: linear-gradient(90deg, #ffffff 0%, #02c2cb 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}
@font-face {
  font-family: 'MyCustomFont'; /* 定义字体的名称 */
  src: url('../../../assets/tt.ttf') format('truetype'); /* 指定字体文件的路径和格式 */
}
.answer_box {
  width: 800px;
  min-height: 200px;
  background: url('../../../assets/bg_.png') no-repeat center center;
  border-radius: 15px;
  // border-image: linear-gradient(177deg, rgba(71, 255, 255, 1), rgba(0, 177, 255, 0.33)) 2 2;
  position: absolute;
  left: 10%;
  top: 20%;
  z-index: 999;
  .videoBox {
    width: 100%;
    display: flex;
    flex-flow: column;
    justify-content: center;
    // align-items: center;
    .video_box {
      width: 100%;
      height: 90%;
    }
  }
  .imgBox {
    width: 90%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    margin-top: 30px;
    overflow-y: scroll;

    .c_img {
      width: 220px;
    }
  }
  .del {
    position: absolute;
    right: -10px;
    top: -10px;
    cursor: pointer;
  }
  .kf {
    width: 104px;
    height: 100px;
    margin-left: 30px;
  }
  .answer {
    width: 1065px;
    height: 398px;
    margin-left: 20px;
    background: #1075e3;
    border-radius: 54px;
    padding: 30px;
    font-size: 27px;
    color: #ffffff;
    text-indent: 1em;
    animation: reveal 3s infinite step-end;
    overflow-y: scroll;
  }
  @keyframes reveal {
    to {
      width: 100%; /* 动画结束时，容器宽度增加到100%，从而显示所有文字 */
      height: 4.8em; /*· 根据行高和需要显示的行数调整高度 */
    }
  }
  .question {
    margin: 40px;
    min-width: 340px;
    max-width: 600px;
    min-height: 77px;
    background: #1edbe8;
    border-radius: 54px;
    text-align: left;
    line-height: 67px;
    padding-left: 10px;
    padding-right: 40px;
    font-size: 27px;
    color: #ffffff;
    text-indent: 1em;
  }
}
.aic {
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 20px;
  color: #ffffff;
  margin: 20px;
  white-space: nowrap;
}
.button {
  width: 150px;
  height: 48px;
  background: #006dff;
  border-radius: 40px;
  font-family: MyCustomFont;
  font-weight: 500;
  font-size: 24px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.green {
  background: rgb(18, 119, 72);
  margin-right: 15px;
}
</style>
